Processing

Guarda el primer, segundo ejercicio y último ejercicio que hagas en el día y súbelos a la tarea

Cuando en una linea aparece // el programa no interpreta lo que hay desde ese punto hasta el final de la línea. Sirve para hacer comentarios

Variables

Una variable es un espacio de memoria que almacena valores que pueden cambiar durante la ejecución del programa. Una variable se crea indicando el tipo (int para números enteros y float para decimales), dandole un nombre y asignándole un valor. Por ejemplo:

float ancho = 10;

Se crea la variable ancho y se le asigna el valor 10. Si en otra parte del programa escribimos ancho será lo mismo que escribir el número 10 que es el valor que le hemos asignado.

Prueba el siguiente programa

float ancho = 10;
float alto = 20;
rect(20,20,ancho, alto);
rect(70,20,ancho, alto);
rect(20,60,ancho, alto);
rect(70,60,ancho, alto);

Prueba ahora a cambiar el valor del ancho

float ancho = 20;

Existen variables que ya tiene asignado un valor por ejemplo las variables width y height almacenan el valor del ancho y el alto de la pantalla. Si las usamos podemos dibujar una elipse que se ajuste a la pantalla aunque definamos diferentes valores con la instrcción size();. Prueba el código siguiente con diferentes valores de pantalla asignados con la instrucción size(ancho,alto);

ellipse(width/2, height/2,20,20); //Crea una circunferencia de radio 20 centrada independientemente del tamaño de la pantalla

En los 3 primeros ejercicios dibuja una elipse centrada que ocupe toda la pantalla usando las variables width y height (ayuda: x₀ será width/2, y₀ será height/2, en ancho de la elipse será widht y el alto height). Cambiando los valores de size, la elipse se tiene que ajustar sin cambiar nada la instrucción que la dibuja.

1. 
2. 
3. 

animaciones

Una de las características principales de processing es que puede crear animaciones. Para ello el programa se divide en dos zonas: setup y draw. Setup se ejecuta una sola vez y draw se ejecuta continuamente.

void setup(){
  //esto es ejecuta una vez
}

void draw(){
  //esto se ejecuta continuamente
}

Prueba este programa:

void setup(){
 size(100,100);
}
float y=0;
void draw(){
 ellipse(50,y, 10,10);
 y=y+1;
}

4. Modifícalo para que la pelota caiga más rápido. Pincha sobre el ejemplo para ver el programa.
   
5. Modifícalo para que la pelota no deje rastro. Pincha sobre el ejemplo para ver el programa.
6. Modifícalo para que el color vaya cambiando a medida que cae. Pincha sobre el ejemplo para ver el programa
7. Modifícalo para que un ladrillo se mueva hacia la derecha a la vez que cae la pelota. Pincha sobre el ejemplo para ver el programa
8. Modifícalos para que independientemente del tamaño de la ventana, la pelota siempre caiga desde la mitad y el ladrillo salga también desde la mitad. En el ejemplo se ha hecho una ventana de 300x200, pero con otros tamaños funcionaría igual. Recuerda que debes pinchar en el ejemplo para ver el programa
9. Haz que la pelota se haga más grande a medida que cae

Las variables predefinidas mouseX y mouseY almacenan las coordenadas del ratón

10. Haz un programa en el que una pelota se mueve en la posición del ratón dejando rastro. Muévete por la ventana del ejemplo para verlo.
11. Modifícalo para que no deje rastro. Muévete por la ventana del ejemplo para verlo.
12. Modifícalo para que deje un rastro que se vala diluyendo. La idea es poner un rectángulo encima con transparencia. Hay que definir un color con 4 números, el cuarto es la opacidad. Muévete por la ventana del ejemplo para verlo.